<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>SnapToRoute Documentation: Examples</title>
    <link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-library.googlecode.com/svn/trunk/util/docs/template/local_extensions.css"></link>
    <script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<h1>SnapToRoute Examples</h1>

<p>To use the class, create a <a href="reference.html"><code>SnapToRoute</code></a> object and pass
the <code>GMap2</code> object and target <code>GPolyline</code> and <code>GMarker</code>
objects to the constructor.</p>

<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37, -122), 13);

var marker = new GMarker(map.getCenter());
map.addOverlay(marker);

var polyline = new GPolyline([new GLatLng(37.1, -122.1), new GLatLng(37.2, -122.2)]);
map.addOverlay(polyline);

var snapToRoute = new SnapToRoute(map, marker, polyline);
</pre>

<p>This will make the marker snap to the polyline at all times.</p>

<p>It is also possible to get information about how far along the line 
the current marker is. This can be done by calling the method 
<code>SnapToRoute.getDistAlongRoute()</code>. You can optionally 
provide a <code>GLatLng</code> object as a parameter to query a different point.</p>

<pre class="prettyprint">
var distanceInMeters = snapToRoute.getDistAlongRoute();

var latlng = map.getCenter();
var distanceInMetersFromCenter = snapToRoute.getDistAlongRoute(latlng);
</pre>

<h2>Basic: Zoom to Polyline</h2>

<p>The following example shows one possible use for SnapToRoute. You can use the class to snap a looking glass (a marker with a custom icon) to a route. This way, you can allow the user to zoom to a detailed view of any point along the route. The code below shows the creation of the <code>SnapToRoute</code> object:</p>
<pre class="prettyprint">
 createMarker();
 createRoute();
 snapToRoute = new SnapToRoute(map, lookingGlass, routeOverlay);
</pre>

<p><a href="../examples/detailzoom.html">View example (detailzoom.html)</a></p>


<a name="advanced"></a>
<h2>Advanced: Printing Distance Along a Route</h2>

<p>In this example, we let the user click the map to create a path, and then display
the distance along the route for the marker in a status div.
</p>
<p>The code below is called after a map click event. It either creates a new <code>SnapToRoute</code> object if none exists, or it just updates the existing object with the changed line.</p>
<pre class="prettyprint">
  routeVertices.push(vertex);
  var pix = G_NORMAL_MAP.getProjection().fromLatLngToPixel(vertex, map.getZoom());
  routePixels.push(pix);
 
  if (routeVertices.length &gt; 1)    {
    plotRoute();
    if (!snapToRoute) {
      snapToRoute = new SnapToRoute(map, startMarker, routeOverlay);
    } else {
      snapToRoute.updateTargets(null, routeOverlay);
    }
  } else {
    startMarker = createMarker(vertex,'Start')
    map.addOverlay(startMarker);
  }
</pre>

<p>The code below is called after a mouse move event on the map. It displays the distance along the route in a DIV.</p>
<pre class="prettyprint">
document.getElementById("statusDiv").innerHTML = snapToRoute.getDistAlongRoute().toFixed(0) + " meters from start at " + latlng.toUrlValue();
</pre>

<p><a href="../examples/demonstration.html">View example (demonstration.html)</a></p>

<br/>
<br/>
<br/>

</body>
</html>
